<template>
  <div class="comment-manage">
    <div class="operation-bar">
      <a-space>
        <a-input-search
          v-model="searchQuery"
          placeholder="搜索小说名称"
          style="width: 200px"
          @search="onSearch"
        />
        <a-select
          v-model="status"
          style="width: 120px"
          placeholder="评论状态"
          @change="onStatusChange"
        >
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="pending">待审核</a-select-option>
          <a-select-option value="approved">已通过</a-select-option>
          <a-select-option value="rejected">已拒绝</a-select-option>
        </a-select>
      </a-space>
    </div>

    <a-table
      :columns="columns"
      :data-source="commentList"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      row-key="id"
    >
      <template #content="{ text }">
        <div class="comment-content">{{ text }}</div>
      </template>
      <template #action="{ record }">
        <a-space>
          <template v-if="record && record.status === 'pending'">
            <a @click="handleApprove(record.id)">通过</a>
            <a @click="handleReject(record.id)">拒绝</a>
          </template>
          <a-popconfirm
            title="确定要删除这条评论吗？"
            @confirm="handleDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
      <template #status="{ text }">
        <a-tag :color="getStatusColor(text || 'pending')">{{ getStatusText(text || 'pending') }}</a-tag>
      </template>
    </a-table>

    <!-- 查看详情弹窗 -->
    <a-modal
      title="评论详情"
      :visible="detailVisible"
      @ok="handleDetailOk"
      @cancel="handleDetailCancel"
    >
      <a-descriptions :column="1">
        <a-descriptions-item label="小说名称">
          {{ currentComment.novelName }}
        </a-descriptions-item>
        <a-descriptions-item label="评论用户">
          {{ currentComment.userName }}
        </a-descriptions-item>
        <a-descriptions-item label="评论内容">
          {{ currentComment.content }}
        </a-descriptions-item>
        <a-descriptions-item label="评论时间">
          {{ currentComment.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          {{ getStatusText(currentComment.status || 'pending') }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'CommentManage',
  data() {
    return {
      loading: false,
      searchQuery: '',
      status: '',
      detailVisible: false,
      currentComment: {},
      columns: [
        {
          title: '小说名称',
          dataIndex: 'novelName',
          key: 'novelName'
        },
        {
          title: '评论用户',
          dataIndex: 'userName',
          key: 'userName'
        },
        {
          title: '评论内容',
          dataIndex: 'content',
          key: 'content',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: '评论时间',
          dataIndex: 'createTime',
          key: 'createTime',
          sorter: true
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      commentList: []
    }
  },
  created() {
    this.fetchCommentList()
  },
  methods: {
    async fetchCommentList() {
      this.loading = true
      try {
        const res = await this.$api.novel.getCommentList({
          page: this.pagination.current,
          pageSize: this.pagination.pageSize,
          query: this.searchQuery,
          status: this.status
        })
        if (res && res.code === 200 && res.data && Array.isArray(res.data.list)) {
          this.commentList = res.data.list.map(item => ({
            ...item,
            status: item.status || 'pending'
          }))
          this.pagination.total = res.data.total || 0
        } else {
          this.$message.error('获取评论列表失败：数据格式不正确')
          this.commentList = []
          this.pagination.total = 0
        }
      } catch (error) {
        this.$message.error('获取评论列表失败: ' + (error.message || '未知错误'))
        this.commentList = []
        this.pagination.total = 0
      }
      this.loading = false
    },
    async handleApprove(id) {
      try {
        await this.$api.novel.approveComment(id)
        this.$message.success('审核通过')
        this.fetchCommentList()
      } catch (error) {
        this.$message.error('操作失败: ' + error.message)
      }
    },
    async handleReject(id) {
      try {
        await this.$api.novel.rejectComment(id)
        this.$message.success('已拒绝')
        this.fetchCommentList()
      } catch (error) {
        this.$message.error('操作失败: ' + error.message)
      }
    },
    async handleDelete(id) {
      try {
        await this.$api.novel.deleteComment(id)
        this.$message.success('删除成功')
        this.fetchCommentList()
      } catch (error) {
        this.$message.error('删除失败: ' + error.message)
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      if (sorter.field) {
        this.sortField = sorter.field
        this.sortOrder = sorter.order
      }
      this.fetchCommentList()
    },
    onSearch() {
      this.pagination.current = 1
      this.fetchCommentList()
    },
    onStatusChange() {
      this.pagination.current = 1
      this.fetchCommentList()
    },
    getStatusColor(status) {
      const colors = {
        pending: 'orange',
        approved: 'green',
        rejected: 'red'
      }
      return colors[status] || 'default'
    },
    getStatusText(status) {
      const texts = {
        pending: '待审核',
        approved: '已通过',
        rejected: '已拒绝'
      }
      return texts[status] || status
    },
    showDetail(record) {
      this.currentComment = { ...record }
      this.detailVisible = true
    },
    handleDetailOk() {
      this.detailVisible = false
    },
    handleDetailCancel() {
      this.detailVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-manage {
  padding: 24px;
  
  .operation-bar {
    margin-bottom: 16px;
  }

  .comment-content {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style> 